<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎宠物医院管理系统</title>


    <script src="js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="js/jquery-md5.js"></script>


</head>
<body>

<div class="background">
    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <div onclick="login()" class="login">登录</div>
            <div onclick="login()" class="register">注册</div>
        </div>
    </div>

    <!-- 主体 -->
    <div class="main">
        <div class="theme">宠物医院管理系统</div>
        <div class="theme-nav">
            <ul>
                <li class="first" onclick="loadAndShuffling()">首页</li>
                <li class="notice">公告信息</li>
                <li class="commodity">商品分类</li>
                <li class="home">寄养信息</li>
                <li class="online">在线留言</li>
            </ul>
        </div>
        <!-- 登录和img的重叠 -->
        <div class="imgAndLogin">
            <div class="img">
                <div class="theme-message">
                    <img class="url" height="463" width="800"/>
                </div>
                <div class="message" ></div>
            </div>
        </div>
    </div>
</div>



<!-- 注册模态框 -->
<div class="modal fade" id="registered" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabelToRegistered">请输入本人的注册信息</h4>
            </div>
            <div class="modal-body">


                <form class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">账号:</label>
                        <div class="col-sm-10">
                            <input type="text" name="usernameToRegistered" class="form-control" id="usernameToRegistered"  placeholder="以字母开头，长度在6~18之间，允许字母数字下划线">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">密码:</label>
                        <div class="col-sm-10">
                            <input type="text" name="passwordToRegistered" class="form-control" id="passwordToRegistered"  placeholder="以字母开头，长度在6~18之间，只能包含字母、数字和下划线">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-10">
                            <input type="text" name="nameToRegistered" class="form-control" id="nameToRegistered"  placeholder="收获联系人">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-10">
                            <input type="text" name="sexToRegistered" class="form-control" id="sexToRegistered"  placeholder="男">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">电话:</label>
                        <div class="col-sm-10">
                            <input  name="phoneToRegistered" class="form-control" id="phoneToRegistered"  placeholder="13664991630本人微信">
                        </div>
                    </div>
                </form>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="registeredButton"  >保存</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // var longinMessage = true; // 判断是否是点击了登录
    let i = 0; // 初始的图片地址
    var firstImg = true;  // 判断是否是第一张图片
    var flag=true;   // 轮播图的状态
    let time = null; // 轮播图
    var notice = false; // 公告信息的状态
    var urlPath = new Array("img/cat.jpg","img/hedgehog.png",
        "img/dog.png");

    $(".url").attr("src",urlPath[0]);

    //主函数
    $(function (){
        load();
        time = setInterval(shuffling,2000);
    });

    // 登录功能
    function login(){
        // 清空首页信息 和 停止轮播图
        $(".imgAndLogin").text("");
        firstImg =true;
        flag = false;
        notice = false;
        clearInterval(time);
        i = 0;
        loginAndRegistered();
    }

    // 动态添加登录和注册
    function loginAndRegistered(){
        $(".imgAndLogin").append("<div class='mainToRegisterAndLogin'></div>");
        $(".mainToRegisterAndLogin").append("<div class='mainToRegisterTheme'>登录或新建账号</div>")
            .append("<div class='mainToRegister'></div>")
            .append("<div class='mainToLogin'></div>");
        $(".mainToRegister").append(" <div class='newRegister'></div>");
        $(".newRegister").append("<div class='newClient'>新客户</div>")
            .append(" <div class='registerIntroduce'>欢迎来到我们宠物商店，创建一个新用户，给您带来不一样的体验，让您的宠物拥有更好的生活。</div>")
            .append("<p>\n" +
                "                        <span" +
                "                                class='btn btn-primary newRegisterButton'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注册一个新的账号&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp\n" +
                "                        </span>" +
                "                    </p>");
        $(".mainToLogin").append("<div class='mainToLoginTheme'>欢迎来到我们宠物旗舰店</div>")
            .append("        <div class='loginIntroduce'>如果您已有账户，请登录。</div>")
            .append("<form>" +
                "<label>账号:</label>" +
                "<input type='text' placeholder='user login' name='username' id='username'/>" +
                "<span class='username_after'></span>" +
                "<label>密码:</label>" +
                "  <input type='password' placeholder='password' name='password' id='password'/>" +
                "<span class='password_after'></span>" +
                "  </form>")
            .append(" <p>" +
                "<span" +
                "      class='btn btn-primary loginButton'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp登录&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp" +
                "</span>" +
                " </p>");
    }

    // 首页按钮
    function loadAndShuffling(){
        if ($(".imgAndLogin").text() =='' || flag  == false){
            // 清空首页信息
            $(".imgAndLogin").text("");
            inImg();
            if (firstImg){
                $(".url").attr("src",urlPath[0]);
                firstImg =false;
            }
            flag = true;
            notice = false;
            // 就是这里没有time，所有导致除了第一次点击删除了轮播图，其他的都没有清除
            time = setInterval(shuffling,2000);
        }
    }

    // 添加图片
    function inImg(){
        let imgAndLogin = $(".imgAndLogin");
        imgAndLogin.append("<div class='theme-messag'></div>")
            .append("<div class='message'></div>");
        $(".theme-messag").append(" <img class='url' height='463' width='800'style='border-radius: 5%' />");
        load();
        shuffling();
    }

    // 地址信息
    function load() {
        $.ajax({
            type:"GET",
            url:'message',
            data: {message:"首页"},
            dataType:'json',
            success:function(data) {
                if (data.code == 200 ){
                    let message = data.extend.message.content;
                    $(".message").text(message);
                }else {
                    window.location.href ="index.html";
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });
    }
    // 轮播图
    function shuffling(){
        if (flag){
            if (urlPath[i+1] != null){
                $(".url").attr("src",urlPath[i+1]);
                // console.log(i);
                i++;
            }
            else {
                $(".url").attr("src",urlPath[0]);
                i = 0;
            }
        }

    }

    // 给注册按钮绑定一个点击函数
    $(".imgAndLogin").delegate(".newRegisterButton","click",function (){
        $("#registered").modal({
            backdrop:"static"
        });
    });

    // 给登录按钮绑定一个点击事件
    $(".imgAndLogin").delegate(".loginButton","click",function (){
        var username = $.trim($("#username").val());
        var password = $.trim($("#password").val());
        // alert(password);
        if(username == ""){
            alert("请输入用户名");
            return false;
        }else if(password == ""){
            alert("请输入密码");
            return false;
        }
        //ajax去服务器端校验

        password = $.md5(password);
        // alert(password);
        var data= {username:username,password:password};
        // alert("我点击了"+username+"!"+password+"data"+data);

        $.ajax({
            type:"POST",
            url:'userToLogin',
            data:data,
            dataType: 'json',
            success:function(data){
                if (data.code == 200 && data.extend.depts == 1){
                    // alert(data.extend.token);
                    localStorage.setItem('Token',data.extend.token);
                    window.location.href ="user";
                }
                if (data.code == 200 && data.extend.depts == 2){
                    // alert(data.extend.token);
                    localStorage.setItem('Token',data.extend.token);
                    window.location.href ="admin";
                }
                if (data.code == 100){
                    alert("请检查账号和密码是否有误");
                }
            },
            error: function (){
                alert("请检查账号和密码是否有误");
            }
        });

    });

    // 给公告信息绑定一个点击函数（ 因为大小变了，导致背景变了
    // 不用cover，直接搞图片的大小，设置为页面大小 ， 后期学vue改进）
    $(".notice").click(function (){
        // longinMessage = false;
        // alert("我点击了公告信息那妞");
        if ($(".imgAndLogin").text() =='' || notice == false){
            $(".imgAndLogin").text("");
            firstImg =true;
            flag = false;
            clearInterval(time);
            i = 0;
            notice = true;
            $(".imgAndLogin").append("<div class='notice'>公告信息</div>")
                .append("<div class='dateAndMessage'></div>");
            $.ajax({
                type:"GET",
                url:'/noticeMessage',
                dataType:'json',
                success:function(data){
                    var list = data.extend.messageList;
                    if (data.code == 200){
                        $.each(list,function(index,item){
                            // console.log(item.message);
                            var str = item.date;
                            var ipos = str.indexOf("T");
                            var date = str.substring(0,ipos);
                            // $(".dateAndMessage").append("<div class='date'></div>")
                            //     .append(" <div class='dateToMessage'></div>");
                            // $(".date").text(date);
                            // $(".dateToMessage").text(item.message);
                            var message ='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp' + item.message ;
                            var dates = $("<div class='date'></div>").append(date);
                            var dateToMessage =
                                $("<div class='dateToMessage'></div>").append(message);
                            $(".dateAndMessage").append(dates)
                                .append(dateToMessage);
                        });
                    }
                },
                error: function (){
                    window.location.href ="index.html";
                }
            });
        }

    });

    // 给商品分类绑定一个点击函数
    $(".commodity").click(function (){
        login();
    });
    $(".online").click(function (){
        login();
    });
    $(".home").click(function (){
        login();
    });

    // 给注册按钮弹窗的保存绑定一个点击函数
    $("#registered").delegate("#registeredButton","click",function (){
        alert("我点击了");
        registeredMessage();
    });

    var usernameToRegistered;
    var passwordToRegistered;
    var nameToRegistered;
    var phoneToRegistered;
    var sexToRegistered;
    // 注册信息的判断
    function registeredMessage(){
        usernameToRegistered = $("#usernameToRegistered").val();
        passwordToRegistered = $("#passwordToRegistered").val();
        nameToRegistered = $("#nameToRegistered").val();
        phoneToRegistered = $("#phoneToRegistered").val();
        sexToRegistered = $("#sexToRegistered").val();
        // alert(usernameToRegistered);
        // alert(passwordToRegistered);
        // alert(nameToRegistered);
        // alert(phoneToRegistered);

        // 判断手机号
        var retPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (!retPhone.test(phoneToRegistered)){
            alert("请输入正确的手机号");
            return;
        }

        // 判断账号
        var retUsernameToRegistered = /^[a-zA-Z]+(?=.*?[a-zA-Z].*?)[a-zA-Z1-9]{1,16}$/;
        if (!retUsernameToRegistered.test(usernameToRegistered)){
            alert("账号以字母开头，长度在6~18之间，只能包含字母、数字");
            return;
        }

        // 判断密码
        var retPassword = /^[a-zA-Z]\w{5,17}$/;
        if (!retPassword.test(passwordToRegistered)){
            alert("密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线");
            return;
        }

        // 判断性别
        if (sexToRegistered == "男" || sexToRegistered == "女"){

        }else {
            alert("请输入正确的性别");
            return;
        }

        // 判断收货人
        if (nameToRegistered.length>10){
            alert("收获联系人最长10个字");
            return;
        }


        userRegisteredAjax();

    }

    // 点击关闭清空信息
    $("#registered").delegate(".btn-default","click",function (){
        $("#usernameToRegistered").val("");
        $("#passwordToRegistered").val("");
        $("#nameToRegistered").val("");
        $("#phoneToRegistered").val("");
        $("#sexToRegistered").val("");
        $("#registered").modal("hide");

    });

    // 注册Ajax
    function userRegisteredAjax(){
        passwordToRegistered = $.md5(passwordToRegistered);
        $.ajax({
            type:"GET",
            url:'/userRegistered',
            data: {userId:usernameToRegistered,password:passwordToRegistered,
                username:nameToRegistered,sex:sexToRegistered,phone:phoneToRegistered},
            dataType:'json',
            success:function(data){
                if (data.code == 200){
                    alert("注册成功");
                    $("#usernameToRegistered").val("");
                    $("#passwordToRegistered").val("");
                    $("#nameToRegistered").val("");
                    $("#phoneToRegistered").val("");
                    $("#sexToRegistered").val("");
                    $("#registered").modal("hide");
                }
                if (data.code == 100){
                    alert("改用户名已经存在");
                }
            },
            error: function (){
                window.location.href ="index.html";
            }
        });
    }



    // data-dismiss="modal"



    // //校验用户名密码是否合法
    // var iptName=document.getElementById('txt-name');
    // var iptPwd=document.getElementById('pwd');
    // var tipName=document.getElementById('tip-name');
    // var tipPwd=document.getElementById('tip-pwd');
    // //对用户名和密码进行校验
    // function valForm(){
    //     return valUserName()&&valPwd();
    // }
    // //校验用户名
    // function valUserName() {
    //     var p=/^\w\w{7,11}$/;//用户名必须为8-12为字母或数字
    //     var r=p.test(iptName.value);//校验
    //     if(!r){
    //         //校验不通过
    //         tipName.style.display='inline-block';//显示
    //         iptName.focus();
    //         return false;
    //     }
    //     return true;
    // }
    // //校验密码
    // function valPwd() {
    //     var p = /^[a-zA-Z]\w{5,17}$/;//以字母开头，长度在6~18之间，只能包含字母、数字和下划线
    //     var r = p.test(iptPwd.value);//校验
    //     if (!r) {
    //         tipPwd.style.display = 'inline-block';
    //         iptPwd.focus();//获取焦点
    //         return false;
    //     }
    //     return true;
    // }




</script>
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    body {
        width:100%;
        height:100%;
        min-width:973px;
        min-heigth:584px;
        background-image:url("img/flowers.png");
        background-repeat:no-repeat;
        background-size:cover;
    }

    .header{
        height: 100%;
        width: 100%;
        background-color: black;
        overflow: hidden;
        font-size: 15px;
    }
    .header .login{
        margin-top: 7px;
        margin-bottom: 7px;
        color: #b8b7b7;
        float: left;
        margin-left: 50px;
    }
    .header .login:hover{
        color: white;
    }
    .header .register{
        margin-top: 7px;
        margin-bottom: 7px;
        color: #b8b7b7;
        float: left;
        margin-left: 40px;
    }
    .header .register:hover{
        color: white;
    }
    .main{
        width: 70%;
        height: 100%;
        /*background-color: #5bc0de;*/
        margin: auto;
        overflow: hidden;
    }
    .main .theme{
        width: 100%;
        margin-top: 20px;
        font-size: 35px;
    }
    .main .theme-nav{
        margin-top: 15px;
    }
    .main .theme-nav ul{
        margin-top: 10px;
        list-style:none;
    }
    .main .theme-nav ul li{
        margin-left: 30px;
        font-size: 18px;
        float: left;
    }
    .main .theme-nav .first{
        float: left;
        margin-left: -40px;
    }

    .main .imgAndLogin{
        margin-top: 50px;
        overflow: hidden;
    }
    .imgAndLogin .mainToRegisterAndLogin{
        margin-top: 50px;
    }
    .imgAndLogin .mainToRegisterTheme{
        font-size: 40px;
    }
    .imgAndLogin .mainToRegister{
        width: 50%;
        float: left;
    }
    .mainToRegister .newClient{
        margin-top: 40px;
        font-size: 30px ;
    }
    .mainToRegister .registerIntroduce{
        margin-top: 25px;
        font-size: 20px;
    }
    .mainToRegister .newRegisterButton{
        margin-top: 20px;
        border-radius: 30px;
    }
    .imgAndLogin .mainToLogin{
        padding-left: 70px;
        width: 50%;
        float: right;
    }
    .mainToLogin .mainToLoginTheme{
        margin-top: 40px;
        font-size:30px;
    }
    .mainToLogin .loginIntroduce{
        margin-top: 25px;
        font-size: 20px;
    }

    .mainToLogin .loginButton{
        margin-top: 20px;
        border-radius: 30px;
    }

    .mainToLogin label{
        margin: 10px 0;
        font-size: 15px;
    }
    .mainToLogin input {
        width: 320px;
        display: block;
        height: 36px;
        border: 0;
        outline: 0;
        padding: 6px 10px;
        line-height: 24px;
        border-radius: 30px;
        /*background-color: #7bcdc4;*/
        -webkit-transition: all 0s ease-in 0.1ms;
        -moz-transition: all 0s ease-in 0.1ms;
        transition: all 0s ease-in 0.1ms;
    }
    .mainToLogin input[type="text"] , .container input[type="password"]  {
        background-color: #FFFFFF;
        font-size: 16px;
    }

    .mainToLogin input[type='submit'] {
        font-size: 16px;
        letter-spacing: 2px;
        color: #666666;
        background-color: #FFFFFF;
    }


    .theme-message img{
        border-radius: 5%;
    }

    .main .message{
        margin-top: 10px;
        font-size: 20px;
    }

    .imgAndLogin .notice{
        overflow: hidden;
        box-sizing:border-box;
        margin-top: 18px;
        font-size: 30px;
    }
    .date{
        margin-top: 20px;
        margin-left: 60px;
        font-size: 20px;
    }
    .dateToMessage{
        font-size: 20px;
        margin-top: 18px;
        margin-left: 120px;
    }

    .dateAndMessage{
        display: inline-block;
    }
</style>

</body>
</html>
